<template>
  <div class="pick_warpper">
    <div class="header">
      <a-button type="text" class="back" @click="handleBack">返回</a-button>
      <div>上传图片</div>
    </div>
    <a-upload
      v-model:file-list="fileList"
      name="img"
      list-type="picture-card"
      class="avatar-uploader"
      :show-upload-list="false"
      action="https://www.liuzhiwei.xyz:400/api/upload"
      :before-upload="beforeUpload"
      @change="handleChange"
    >
      <img v-if="imageUrl" :src="imageUrl" alt="img" class="img" />
      <div v-else>
        <loading-outlined v-if="loading"></loading-outlined>
        <plus-outlined v-else></plus-outlined>
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>

    <a-button class="fotter" @click="handleUpload">确认上传</a-button>
  </div>
</template>

<script lang="ts">
interface FileItem {
  uid: string;
  name?: string;
  status?: string;
  response?: string;
  url?: string;
  type?: string;
  size: number;
  originFileObj: any;
}

interface FileInfo {
  file: FileItem;
  fileList: FileItem[];
}

function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
}

import { message } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { uploadLargeFile } from '@/unit/upload';
export default defineComponent({
  components: {
    LoadingOutlined,
    PlusOutlined,
  },
  emits: ['handleUpload', 'handleBack', 'onUpload'],
  setup(props, { emit }) {
    const fileList = ref([]);
    const loading = ref<boolean>(false);
    const imageUrl = ref<string>('');
    const img = ref<string>('');

    const handleChange = (info: FileInfo) => {
      if (info.file.status === 'uploading') {
        loading.value = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url: string) => {
          imageUrl.value = base64Url;
          loading.value = false;
        });
        // console.log((info.file.response as any).data);
        img.value = (info.file.response as any).data;
      }
      if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
      }
    };

    const beforeUpload = (file: FileItem) => {
      const isJpgOrPng =
        file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        message.error('你只能选择图片文件!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error('图片上传要小于 2MB!');
      }
      return isJpgOrPng && isLt2M;
    };

    const handleUpload = () => {
      emit('handleUpload', img.value);
    };

    const handleBack = () => {
      emit('handleBack');
    };

    return {
      fileList,
      loading,
      imageUrl,
      handleChange,
      beforeUpload,
      handleUpload,
      handleBack,
      uploadLargeFile,
    };
  },
});
</script>
<style lang="less">
.avatar-uploader > .ant-upload {
  width: 365px;
  height: 365px;
}
.avatar-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 365px;
  height: 365px;
}

.img {
  width: 365px;
  height: 365px;
  object-fit: contain;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
  // margin: ;
}

.ant-upload-select-picture-card {
  margin: 0 !important;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.pick_warpper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 5px;
  .header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
  .fotter {
    margin-top: 20px;
  }
}
</style>
